<template>
    <view>
        <view class="aucoachbox" v-for="(item) in list" :key="item.id" @click="gotopage(item.path)">
            <view class="left">
                <!-- <image class="icon" :src="item.icon" mode="widthFix"></image> -->
                <view class="name">{{ item.name }}</view>
                <!-- <view class="state" :style="{color:textColor[item.state].color,backgroundColor:textColor[item.state].bg}">{{ textColor[item.state].text}}</view> -->
            </view>
            <image class="rimg" :src="item.rightimg" mode="widthFix"></image>
        </view>
    </view>
</template>

<script>
export default {
components: {},
data() {
return {
    list:[
        {
            id:1,
            name:'高尔夫记分',
            rightimg: 'https://golfdate.oss-cn-shenzhen.aliyuncs.com/upload/1711011951088796.png',
            path:'/pages/court/score_detail'
        },
    ]
};
},
methods: {
    gotopage(path){
        this.nav_to(path)
    }
},

}
</script>
<style lang='scss'>
page {
    background-color: #F6F6F6;
}
.aucoachbox {
    width: 100%;
    height: 108rpx;
    background-color: #fff;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 32rpx;
    box-sizing: border-box;
    margin: 16rpx 0;

    .left {
        display: flex;
        align-items: center;

        .icon {
            width: 48rpx;
            height: 48rpx;
            margin-right: 8rpx;
        }

        .name {
            font-size: 32rpx;
            color: #333333;
        }

        .state {
            padding: 4rpx 12rpx;
            font-size: 24rpx;
            border-radius: 4rpx;
            display: flex;
            align-items: center;
            justify-content: center;
            margin-left: 12rpx;
        }

        .bg1 {
            color: #666666;
            background-color: #F2F2F2;
        }

        .bg2 {
            color: #E7A127;
            background-color: #FFF4E0;
        }

        .bg3 {
            color: #2BA139;
            background-color: #E5FFE8;
        }
    }

    .rimg {
        width: 32rpx;
        height: 44rpx;
    }
}
</style>